<template>
	<view class="c_container">
		<view class="time-box">
			<view class="date_change" style="padding: 32rpx;" @click="showDate = true">
				<!-- <custom-year-month-selector ref="selector" @change="dateChange"></custom-year-month-selector> -->
				<!-- <image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image> -->
				<slot>{{dateValue.textCN}}</slot>
				<image class="down_icon" src="../../static/images/down.png" mode="scaleToFill"></image>
			</view>
			<view class="l_c_top" v-if="recodeList.length > 0">
				<text class="scroll_title moeny">支出：{{Number(disburseAmount).toFixed(2)}}</text>
				<text class="scroll_title moeny">收入：{{Number(incomeAmount).toFixed(2)}}</text>
				<text class="scroll_title moeny">余额：{{Number(balance).toFixed(2)}}</text>
			</view>
		</view>
		<view class="list_container">
			<view class="list_c_box">
				<view>
					<view class="txtCon" v-if="recodeList.length == 0">
						<noContent></noContent>
					</view>
					<view v-else>
						<scroll-view scroll-y="true" :style="{height: height}" class="scroll-Y" @scrolltoupper="upper"
							@scrolltolower="lower" refresher-enabled="true" :refresher-triggered="triggered"
							:refresher-threshold="70" @scroll="scroll"
							@refresherrefresh="onRefresh">
							<view class="l_item_box" v-for="(item, index) in recodeList" :key="index">
								<!-- <image src="/static/images/shop.png" class="l_i_box_img"></image> -->
								<view class="l_i_b_box">
									<view class="l_ite_top">
										<!-- <text class="s_title">{{item.title}}</text> -->
										<text class="s_type">{{item.opTypeName}}</text>
										<text class="scroll_time">{{item.billTime}}</text>
									</view>
									<view class="l_ite_top">
										<text
											:class="item.amount > 0 ? 'jiaMoney' : 'jianMoney'">{{getCheckNum(item.amount)}}</text>
									</view>
								</view>
							</view>
							<view class="item_f_box">
								<text class="scroll_time">{{canLoad?'数据加载中...':'没有更多数据啦'}}~</text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<custom-year-month-selector-plus v-model="showDate" @change="cusChange" />
	</view>
</template>

<script>
	import {
		queryEmpwalletDetail,
		queryEmpwalletDetailAndCount
	} from '../../common/api/index.js';
	import {
		dateFtt,
		mGetDate,
		_showLoading
	} from '../../common/js/util.js'
	import noContent from '../../components/no-content.vue'
	import customYearMonthSelectorPlus from '@/components/custom-year-month-selector/custom-year-month-selector-plus'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		onLoad: function(option) {
			this.orgId = parseInt(option.orgId)
			this.empId = parseInt(option.empId)
			let text = this.getDate()
			let value = text.split('-');
			let textCN = value[0] + '年' + value[1] + '月'
			this.dateValue = {
				value,
				text,
				textCN,
				sAndeforTime: [dateFtt('yyyy-MM-dd', value[0] + '-' + value[1] + '-01') + ' 00:00:00', dateFtt(
						'yyyy-MM-dd', value[0] + '-' + value[1] + '-' + mGetDate(value[0], value[1])) +
					' 23:59:59'
				],
			}
		},
		onShow: function() {
			let _that = this;
			uni.getSystemInfo({
				success: function(res) {
					_that.height = res.windowHeight - 95 + 'px';
				}
			})
			this._queryStudentSZDetail()
		},
		components: {
			noContent,
			customYearMonthSelectorPlus,
			tmcModal
		},
		computed: {
			getCheckNum(amount) {
				return function(amount) {
					if (amount > 0) {
						return '+' + Number(amount).toFixed(2);
					} else if (amount < 0) {
						return Number(amount).toFixed(2);
					}
				}
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				showDate: false,
				date: '',
				date1: '',
				billMouth: '',
				recodeList: [],
				height: 0,
				incomeAmount: 0,
				disburseAmount: 0,
				balance: 0,
				now: currentDate,
				dateValue: {},
				content1: '',
				title1: '',
				showMcModal1: false,
				triggered: false,
				currentPage: 1,
				canLoad: true
			}
		},
		methods: {
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			cusChange(dateValue) {
				this.currentPage = 1
				this.recodeList = []
				this.dateValue = dateValue
				this._queryStudentSZDetail()
			},
			chooseDate() {
				uni.navigateTo({
					url: '../datepicker/datepicker?date=' + this.now
				});
			},
			onRefresh() {
				this.currentPage = 1
				this.recodeList = []
				this._queryStudentSZDetail()
			},
			_queryStudentSZDetail() {
				_showLoading('加载中,请稍后...')
				queryEmpwalletDetailAndCount({
					loginOrgId: this.orgId,
					empIds: this.empId,
					startBillTime: this.dateValue.sAndeforTime[0],
					endBillTime: this.dateValue.sAndeforTime[1],
					currentPage: this.currentPage,
					pageSize: 100,
					appId: 100,
					billMouth: this.dateValue.text
				}).then(res => {
					if (res.resultCode == 0) {
						this.recodeList.push(...res.rows)
						this.canLoad = !(this.recodeList.length === res.count)
						console.log(!this.recodeList.length == res.count,this.recodeList, res.count)
						this.balance = res.balance
						this.incomeAmount = res.incomeAmount
						this.disburseAmount = res.disburseAmount
						uni.hideLoading()
					} else {
						uni.hideLoading()
						this.showTxt('温馨提示', res.resultMsg)
					}
				}).catch(err => {
					uni.hideLoading()
					this.showTxt('温馨提示', '系统错误!')
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				if(!this.canLoad) return
				this.currentPage += 1
				this._queryStudentSZDetail()
			},
			scroll: function(e) {
				// console.log(e)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.c_container {
		height: 100vh;
		overflow: hidden;
	}

	.time-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 60rpx;
	}

	.date_change {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: 800;
		color: #3C424F;
		line-height: 42rpx;
	}

	.down_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.s_time {
		color: #fff;
		background: rgb(118, 118, 119);
		margin-right: 20rpx;
		padding: 5prx 20rpx;
		display: block;
		width: 100px;
		text-align: center;
	}

	.list_container {
		padding: 10rpx;
		background-color: #FFF;
	}

	.list_c_box {
		padding: 10rpx;
	}

	.l_c_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #F6F6F6;
		padding: 0 30rpx;
	}

	.l_item_box {
		display: flex;
		lex-direction: row;
		align-items: center;
	}

	.s_title {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #3C424F;
	}

	.l_i_box_img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.l_i_b_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		border-bottom: 1px solid #dddddd;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.l_ite_top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		line-height: 50rpx;
	}

	.item_f_box {
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scroll_title {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 500;
		font-size: 28rpx;
		color: #6B707A;
	}

	.s_type {
		font-size: $font-size-base;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.txtCon {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.no-content {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #999999;
	}

	.jiaMoney {
		font-size: 40rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #FA6400;
	}

	.jianMoney {
		font-size: 40rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #3C424F;
	}

	.scroll_time {
		font-size: 24rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}
</style>
